<template>
	<div>
		<div class="head">
			<div class="h-left">
				<div>
					<img src="../assets/logoWhite.png" alt="">
				</div>
				<!-- <a-button style="margin-bottom: 16px" @click="toggleCollapsed"> -->
					<a-icon style="color: #FFFFFF;font-size: 32px;margin-left: 30px;" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapsed"/>
				<!-- </a-button> -->
			</div>
			<div class="h-right">
				<!-- <a-dropdown>
					<a class="ant-dropdown-link" @click="e => e.preventDefault()">
						云区
						<a-icon type="down" />
					</a>
					<a-menu slot="overlay">
						<a-menu-item>
							<a href="javascript:;">昆明</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">玉溪</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">丽江</a>
						</a-menu-item>
					</a-menu>
				</a-dropdown>
				<a-dropdown>
					<a class="ant-dropdown-link" @click="e => e.preventDefault()">
						平台
						<a-icon type="down" />
					</a>
					<a-menu slot="overlay">
						<a-menu-item>
							<a href="javascript:;">Openstack</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">Vmware</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">Aws</a>
						</a-menu-item>
					</a-menu>
				</a-dropdown>
				<a-dropdown>
					<a class="ant-dropdown-link" @click="e => e.preventDefault()">
						项目
						<a-icon type="down" />
					</a>
					<a-menu slot="overlay">
						<a-menu-item>
							<a href="javascript:;">项目1</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">项目2</a>
						</a-menu-item>
						<a-menu-item>
							<a href="javascript:;">项目3</a>
						</a-menu-item>
					</a-menu>
				</a-dropdown>
				 -->
				<a-dropdown-button>
					超级管理员
					<a-menu slot="overlay" @click="handleMenuClick">
						<!-- <a-menu-item key="1">
							<a-icon type="user" />用户信息 </a-menu-item>
						<a-menu-item key="2">
							<a-icon type="setting" />用户设置 </a-menu-item> -->
						<a-menu-item key="3">
							<a-icon type="logout" />退出登录 </a-menu-item>
					</a-menu>
					<a-icon slot="icon" type="user" />
				</a-dropdown-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'pageHead',
		data() {
			return {
				options: [
				{
				  value: 'kunming',
				  label: '昆明市',
				  children: [
					{
					  value: 'Openstack',
					  label: 'Openstack',
					  children: [
						{
						  value: 'project1',
						  label: '项目1',
						},
						{
						  value: 'project2',
						  label: '项目2',
						},
						{
						  value: 'project3',
						  label: '项目3',
						},
					  ],
					},
					{
					  value: 'Vmware',
					  label: 'Vmware',
					  children: [
						{
						  value: 'project1',
						  label: '项目1',
						},
						{
						  value: 'project2',
						  label: '项目2',
						},
						{
						  value: 'project3',
						  label: '项目3',
						},
					  ],
					},
				  ],
				},
				{
				  value: 'lijiang',
				  label: '丽江市',
				  children: [
					{
					  value: 'Openstack',
					  label: 'Openstack',
					  children: [
						{
						  value: 'project1',
						  label: '项目1',
						},
						{
						  value: 'project2',
						  label: '项目2',
						},
						{
						  value: 'project3',
						  label: '项目3',
						},
					  ],
					},
					{
					  value: 'Aws',
					  label: 'Aws',
					  children: [
						{
						  value: 'project1',
						  label: '项目1',
						},
						{
						  value: 'project2',
						  label: '项目2',
						},
						{
						  value: 'project3',
						  label: '项目3',
						},
					  ],
					},
				  ],
				},
			  ],
			};
		},
		methods: {
			toggleCollapsed() {
				let collapsed = !this.collapsed;
				this.$c.vuex('collapsed',collapsed)
			},
			handleMenuClick(e) {
				console.log(e)
				if(e.key=='3'){
					this.$router.push({name:'login'})
				}
			},
			onChange(){
				
			}
		}
	}
</script>

<style>
	.head {
		display: flex;
		background-color: #1C2B36;
		justify-content: space-between;
	}
	.h-left{
		display: flex;
		align-items: center;
		padding-left: 32px;
	}
	.h-right{
		display: flex;
		align-items: center;
		padding-right: 40px;
	}
	.h-right .ant-cascader-picker{
		width: 280px;
		margin-right: 40px;
	}
	.ant-cascader-menu li{
		display: block;
	}
</style>
